<%--
  Created by IntelliJ IDEA.
  User: Simon
  Date: 13.10.2009
  Time: 12:29:55
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" %>
<html>
  <head>
    <gui:resources components="datePicker,expandablePanel"/>
    <title>Register as a rower</title>
    <meta name="layout" content="wider"/>
    <link rel="stylesheet" href="${createLinkTo(dir:'css',file:'register.css')}" /> 
    <g:javascript library="jquery"/>
    <script>
       $(document).ready(function(){

         /*  if checkbox "individual" is clicked hide clubs dropdown */
         $('#individual').click(function(){
              $('#clubs').toggle();
         });

         /*make an ajax call to render clubs of selected country  */
         $('#country').change(function(){
           $.ajax({
             url:"/RowingManagement/rower/findClubsByCountry",
             data:"id="+this.value,
             cache:false,
             success:function(html){
               $("#clubs").html(html);
             }
           });

         });


       });

    </script>

  </head>
  <body>
       <g:form id="register-form"  method="POST" enctype="multipart/form-data" controller="rower" action="saveRower">
			<fieldset>
                <div id="errors" style="color:red;">
                  <g:hasErrors bean="${rower}">
                    <g:renderErrors bean="${rower}" as="list"/>
                  </g:hasErrors>
                  <g:if test="${flash?.message}">
                    ${flash.message}
                  </g:if>
                </div>
				<div id="step1">
                  <div class="legend">1.</div>
                  <h3>Enter your login details</h3>
                  <div class="info">
                      You will use email for your login
                  </div>
                  <div class="field">
                      <label for="email">Email: </label>
                      <input id="email" type="text" class="no-border" name="email" value="${rower.email}"/>
                    <g:hasErrors bean="${rower}" field="rower.email">
                      <div class="error"> correct this field</div>
                    </g:hasErrors>
                  </div>
                  <div class="field">
                      <label for="email2">Retype email: </label>
                      <input id="email2" type="text" class="no-border" name="email2"/>
                      <!--<div class="error">*error will be here</div>  -->
                  </div>
                  <div class="field">
                      <label for="password">Password: </label>
                      <input id="password" type="password" class="no-border" name="password"/>
                       <!--<div class="error">*error will be here</div>  -->
                  </div>
                  <div class="field">
                      <label for="password2">Retype password: </label>
                      <input id="password2" type="password" class="no-border" name="password2"/>
                      <!--<div class="error">*error will be here</div>  -->
                  </div>
               </div>
			  <div id="step2">
                 <div class="legend">2.</div>
                 <h3>Your personal info</h3>
                    <div class="info">
                        So tell me your name
                    </div>
                    <div class="field">
                        <label for="name"> Firstname:</label>
                        <input id="name" type="text" class="no-border" name="name" value="${rower.name}"/>
                       <!--<div class="error">*error will be here</div>  -->
                    </div>
                   <div class="field">
                        <label for="lastname">Lastname</label>
                        <input id="lastname" class="no-border" name="surname" type="text" value="${rower.surname}">
                     <!--<div class="error">*error will be here</div>  -->
                    </div>
                    <div class="field">
                        <label for="birthday">Birthday</label>
                        <gui:datePicker id="birthday" name="birthday" value="${rower.birthday}" formatString="dd/MM/yyyy"/>
                       <!--<div class="error">*error will be here</div>  -->
                    </div>
                    <div class="field">
                        <label for="sex">Sex:</label>
                        <g:select id="sex" name="sex" from="${['male','female']}"/>
                       <!--<div class="error">*error will be here</div>  -->
                    </div>
               </div>
			  <div id="step3">
                 <div class="legend">3.</div>
                 <h3>Enter your address details</h3>
                    <div class="info">
                        Where are you located?
                    </div>
                    <div class="field">
                        <label for="address">Address line 1: </label>
                        <input id="address" type="text" class="no-border" name="street"/>
                        <!--<div class="error">*error will be here</div>  -->
                    </div>
                    <div class="field">
                        <label for="address2">Address line 2: </label>
                        <input id="address2" type="text" class="no-border" name="street2"/>
                        <!--<div class="error">*error will be here</div>  -->
                    </div>
                    <div class="field">
                        <label for="zip">Postal code: </label>
                        <input id="zip" type="text" class="no-border" name="postalCode"/>
                        <!--<div class="error">*error will be here</div>  -->
                    </div>
                    <div class="field">
                        <label for="city">City: </label>
                        <input id="city" type="text" class="no-border" name="city"/>
                        <!--<div class="error">*error will be here</div>  -->
                    </div>
                    <div class="field">
                        <label for="state">State: </label>
                        <input id="state" type="text" class="no-border" name="state"/>
                       <!--<div class="error">*error will be here</div>  -->
                    </div>
                    <div class="field">
                        <label for="country">Country: </label>
                        <%-- onchange="${remoteFunction(action:'findClubsByCountry',onSuccess:'success(html)',params:'\'id=\' + this.value')}--%>
                        <g:select id="country" name="country"  from="${clist}" optionKey="id" noSelection="['':'']"/>
                        <!--<div class="error">*error will be here</div>  -->
                    </div>
               </div>
               <div id="step4">
                 <div class="legend">4.</div>
                 <h3>Logo</h3>
                    <div class="info">
                        You're almost done
                    </div>
                    <div class="field">
                        <label for="club">Select your rowing club</label>
                        <div id="clubs">
                          First select your country
                         <%-- <g:select id="club" name="club" from="${clubs}"/> --%>
                        </div>
                        I am an individual rower <input id="individual" class="shorter" type="checkbox" name="individual"/>
                    </div>
                    <div class="field">
                        <label for="logoInput">Your logo: </label>
                        <input id="logoInput" type="file"  name="logoInput"/>
                    </div>
                    <div class="info">Answer this simple question</div>
                    <div>
                        <g:if test="${flash?.captcha}">
                          <div class="error"> ${flash.captcha}</div>
                        </g:if>
                        <label for="captcha">${session?.captcha} = </label>
                        <g:remoteField class="captcha"  name="captchaValue" update="response" paramName="captchaValue" action="checkCaptcha"/><div id="response"></div>
                    </div>
                    <div class="info">Finally, choose your destiny</div>
                    <g:submitButton value="Register" name="regBtn"/>

               </div>
               </fieldset>

		</g:form>
  </body>
</html>